<template>
  <div class="bar-wrap">
    <!-- <Overlay :show="showTips" /> -->
    <form class="search-form" @submit="handleClick($event)">
      <div class="item">
        <input v-model="getKeyword" type="text" name="key" placeholder="请输入内容" />
      </div>
      <div class="btn-input-append">
        <search-btn class="search-btn" :icon="'sousuo'" />
      </div>
    </form>
  </div>
</template>

<script>
import SearchBtn from "./SBtn.vue";

export default {
  name: "SearchBar",
  components: {
    SearchBtn,
  },
  data() {
    return {
      getKeyword:'',
    };
  },
  computed: {
    
  },

  methods: {
    
  }
};
</script>

<style lang="less" scoped>
@import "../styles/mixins.less";

.bar-wrap {
  position: relative;
  display: flex;
  justify-items: center;
  align-items: center;
  .search-form {
    display: flex;
    .item {
      input {
        .input-style();
      }
    }
  }

  .tips {
    position: absolute;
    color: rgba(0, 0, 0, 0.1);
    left: 50%;
    top: 50%;
    width: 160px;
    transform: translate(-50%, -50%);
  }
}
</style>